'use strict';
import React, { Component } from 'react';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react';
import { Router, Switch, Route, Link } from 'react-router-dom';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import Table from 'react-virtualized/dist/commonjs/Table';
import Column from 'react-virtualized/dist/commonjs/Table/Column';
import styles from './table.less';
import { bindThis } from './common/tools';
import { sendActionAndWait, sendAction, socket, doWhenConnect } from './store';
import { Icon, Button } from 'antd';
import { net as netAPI } from './protocolConst.json';
import 'react-virtualized/styles.css';

@inject('store')
@observer
export default class AgentList extends Component {
	constructor(props) {
		super(props);
		bindThis(this, '_getDatum', '_noRowsRenderer');
	}
	componentWillMount() {
		const { store } = this.props;
		doWhenConnect(() => {
			store.requestAllAgents();
		});
	}
	render() {
		const { store } = this.props;
		const { agents, deviceUpdateTime } = store;
		const rowGetter = ({ index }) => this._getDatum(index);

		const rowClassName = ({ index }) => {
			if (index < 0) {
				return styles.headerRow;
			} else {
				return index % 2 === 0 ? styles.evenRow : styles.oddRow;
			}
		};

		this.sortedData = agents.map((v, k) => {
			return { ...v, index: k };
		});
		return (
			<div style={{ display: 'flex', flexDirection: 'column', flex: '1' }}>
				<div style={{ margin: 5 }}>
					<button
						onClick={async () => {
							try {
								this.props.store.requestAllAgents();
							} catch (e) {
								console.log(e);
							}
						}}
					>
						刷新
					</button>
				</div>
				<div style={{ flex: 1 }}>
					<AutoSizer>
						{({ width, height }) => (
							<Table
								overscanRowCount={1}
								noRowsRenderer={this._noRowsRenderer}
								rowCount={agents.length}
								rowHeight={50}
								rowGetter={rowGetter}
								rowClassName={rowClassName}
								headerHeight={30}
								headerClassName={styles.headerColumn}
								// disableHeader={true}
								width={width - 2}
								height={height - 2}
							>
								<Column
									label="No"
									cellDataGetter={({ rowData }) => rowData.index}
									dataKey="index"
									width={50}
									className={styles.exampleColumn}
								/>
								<Column
									dataKey="id"
									label="id"
									width={100}
									className={styles.exampleColumn}
								/>
								<Column
									dataKey="wxid"
									label="wxid"
									width={180}
									className={styles.exampleColumn}
								/>
								<Column
									dataKey="subCount"
									label="sub"
									width={100}
									className={styles.exampleColumn}
								/>
								<Column
									label="type"
									dataKey=""
									width={100}
									className={styles.exampleColumn}
									cellDataGetter={({ rowData }) => rowData}
									cellRenderer={({ cellData }) => {
										if (!cellData.options) return 'web';
										var type = 'pad';
										if (cellData.pcmsState == 1) type += '(*)';
										return type;
									}}
								/>
								<Column
									label="options"
									dataKey=""
									width={300}
									flexGrow={1}
									className={styles.textColumn}
									cellDataGetter={({ rowData }) => rowData}
									cellRenderer={({ cellData }) => {
										return (
											<span className={styles.textColumn}>
												{JSON.stringify(cellData.options || {})}
											</span>
										);
									}}
								/>
								<Column
									label="abc"
									dataKey=""
									width={100}
									className={styles.exampleColumn}
									cellDataGetter={({ rowData }) => rowData}
									cellRenderer={({ cellData }) => {
										return (
											<Button
												type="primary"
												onClick={() => {
													sendAction(netAPI.release, { id: cellData.id });
													store.requestAllAgents();
												}}
											>
												关闭
											</Button>
										);
									}}
								/>
							</Table>
						)}
					</AutoSizer>
				</div>
			</div>
		);
	}

	_getDatum(index) {
		const agents = this.sortedData;
		return agents[index];
	}

	_noRowsRenderer() {
		return <div className={styles.noRows}>No rows</div>;
	}
}
